<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>网页布局</title>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <meta name="viewport" content="width=device-width">
  <style>
    @media screen and (max-width: 575px) {
      .main {
        width: 100%;
      }
    }
    @media screen and (min-width: 1920px) {
      .main {
        width: 1080px;
      }
    }

    body > * { 
      width: 95%; 
      height: auto; 
      margin: 0 auto;
      margin-top: 10px;
      border: 1px solid #000; 
      padding: 5px;
    }
    header {
      height: 30px;
      text-align: center;
    }
    section {
      height: 550px;
    }
    footer {
      height: 30px;
      text-align: center;
    }
    section > * {
      height: 100%; 
      border: 1px solid #000; 
      float: left;
    }
    aside {
      width: 55%;
      height: 100%;
      margin-left: 2%;
    }
    .main img{
      float: left;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin-right: 13px;
      
    }
    
    article { 
      width: 35%; 
      margin-left: 5%;
    }
  </style>  
</head>

<body>
<header>header</header>
<section>
  <aside>
  <div class="main">
    <div class="content"><?php include "D:/web/csy435/作业/content.php";?></div>
</div>
  </aside>
  <article>
    <div class="side"><?php include "D:/web/csy435/作业/side.php";?></div>
  </article>
</section>

<footer>
  <div class="footer">footer</div>
</footer>

</body>
</html>